import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Button } from '@tarojs/components'
import './index.less'
import member from '../../img/member.png'
import rightArrow from '../../img/right_arrow.png'
import address from '../../img/dizhi.png'
import customer from '../../img/kefu.png'
import help from '../../img/bangzhu.png'
import we from '../../img/women.png'
import phone from '../../img/dianhua.png'
import otherRightArrow from '../../img/otherRightArrow.png'


@connect(({ mine }) => ({ mine }))
export default class Index extends Component {

  config = {
    navigationBarTitleText: ''
  }


  handle(id){
    console.log('id',id);
    switch (id) {
      case 1:
      Taro.chooseAddress({})
        break;
      case 3:
        Taro.navigateTo({
          url:'../feedback/index'
        })
        break;
      case 4:
        Taro.navigateTo({
          url:'../about/index'
        })
        break;
    }
  }
  handleJumpCoupons(){
    const {userInfo}=this.props.mine;
    const {user} =userInfo;
    console.log('mine render userInfo', userInfo);
    Taro.navigateTo({
      url:`../coupons/index?id=${user.id}`
    })
  }
  handleJump(){
    Taro.navigateTo({
      url:`../collection/index`
    })
  }
  handlemembers(){
    Taro.navigateTo({
      url:'../members/index'
    })
  }

  componentWillMount () {
    const { dispatch } = this.props;
    dispatch({
      type: 'mine/init',
    });
  }

  render () {
    const {servicePhone,coupons,userInfo}=this.props.mine;
    console.log('mine render servicePhone', servicePhone);
    const {user} =userInfo;
    console.log('mine render userInfo', userInfo);
    const data = {
      head:'http://iph.href.lu/300x200?text=占位',
      nickName:'听你说',
      id:1254321,
      order:[
        {
          id:1,
          number:1,
          text:'待使用',
        },{
          id:2,
          number:1,
          text:'已使用',
        },{
          id:3,
          number:1,
          text:'待收货',
        },{
          id:4,
          number:1,
          text:'退款/售后',
        },
      ],
      service:[
        {
          id:1,
          img:address,
          text:'收货地址',
        },{
          id:2,
          img:customer,
          text:'在线客服',
        },{
          id:3,
          img:help,
          text:'帮助反馈',
        },{
          id:4,
          img:we,
          text:'关于我们',
        }
      ],
      phone:'0551-6288880'
    }
    return (
      <View className='index'>
        {/**------上部个人信息----- */}
        <View className='top_mine_information_box'>
          {/**左边头像 */}
          <Image src={userInfo.userInfo.avatarUrl} className='head' />
          {/*右边具体信息 */}
          <View className='top_mine_right_box'>
            <View className='right_first'>
              <Text>{userInfo.userInfo.nickName}</Text>
              {true?
                <View className='members_box'>
                  <Text className='members_box_text'>会员</Text>
                </View>
              :null}
            </View>
            <Text className='right_id'>ID:{user.id}</Text>
          </View>
        </View>
        {/**-------收藏店铺优惠券----- */}
        <View className='collect_preferential'>
            <View  className='one_collect_preferential_box'  onClick={this.handleJump}>
              <Text className='one_box_number'>{coupons.length}</Text>
              <Text className='one_box_number'>收藏店铺</Text>
            </View>
            <View  className='one_collect_preferential_box'  onClick={this.handleJumpCoupons}>
              <Text className='one_box_number'>{coupons.length}</Text>
              <Text className='one_box_number'>优惠券</Text>
            </View>
        </View>
        {/**-------会员中心------- */}
        <View className='member_box'  onClick={this.handlemembers}>
          <View className='member_box_left'>
            <Image src={member} className='member' />
            <Text className='member_box_left_text'>会员PLUS</Text>
          </View>
          <View className='member_box_right'>
            <Text className='member_box_right_text'>会员中心</Text>
            <Image src={rightArrow} className='rightArrow' />
          </View>
        </View>
        {/**----我的订单
        <View className='my-order-box'>
          <View className='my-order-top-box'>
            <Text className='myOrder-text'>我的订单</Text>
            <View className='my-order-top-right'>
              <Text className='allOrder-text'>全部订单</Text>
              <Image src={otherRightArrow} className='rightArrow' />
            </View>
          </View>
          <View className='my-order-bottom-box'>
            {data.order.map(item=>(
              <View key={item.id} className='bottom-box-one-order'>
                <Text className='one-order-text'>{item.number}</Text>
                <Text className='one-order-text'>{item.text}</Text>
              </View>
            ))}
          </View>
        </View>------ */}
        {/**-----我的服务------ */}
        <View className='my-service-box'>
          <Text className='my-service-text'>我的服务</Text>
          <View>
              {data.service.map(item=>(
                <View key={item.id} className={item.id!==2?'one-service':'one-service-other'} onClick={this.handle.bind(this,item.id)}>
                  <View className='service-left-box'>
                    <Image src={item.img} className={item.id==1?'service-img':'serviceImg'} />
                    {item.id!==2?
                      <Text className='service-left-box-text'>{item.text}</Text>:
                      <Button open-type='contact' className='button'>{item.text}</Button>
                    }
                  </View>
                  <Image src={otherRightArrow} className='otherRightArrow' />
                </View>
              ))}
          </View>
          <View className='one-service'>
            <View className='service-left-box'>
              <Image src={phone} className='serviceImg' />
              <Text className='service-left-box-text'>客服电话</Text>
            </View>
            <Text className='one-service-right-phone'>{servicePhone.integer}</Text>
          </View>
        </View>
      </View>
    )
  }
}
